<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      class="filter-form"
    >
      <el-form-item label="方向" prop="direction">
        <el-select
          v-model="queryParams.direction"
          placeholder="请选择方向"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in directionList"
            :key="item.id"
            :label="item.directionName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日志类型" prop="logType">
        <el-select
          v-model="queryParams.logType"
          placeholder="请选择日志类型"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="(label, value) in logTypeMap"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="记录时间" prop="createTime">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" class="mb20">
      <el-col :span="24">
        <el-card class="analysis-card">
          <template #header>
            <div class="card-header">
              <span>方向分析</span>
              <div class="analysis-tabs">
                <el-button
                  :type="activeTab === 'overview' ? 'primary' : 'default'"
                  @click="switchTab('overview')"
                >
                  方向概览
                </el-button>
                <el-button
                  :type="activeTab === 'charts' ? 'primary' : 'default'"
                  @click="switchTab('charts')"
                >
                  图表分析
                </el-button>
                <el-button
                  :type="activeTab === 'comparison' ? 'primary' : 'default'"
                  @click="switchTab('comparison')"
                >
                  方向对比
                </el-button>
                <el-button
                  :type="activeTab === 'detail' ? 'primary' : 'default'"
                  @click="switchTab('detail')"
                >
                  数据明细
                </el-button>
              </div>
            </div>
          </template>
          <div class="analysis-content">
            <!-- 方向概览 -->
            <div v-show="activeTab === 'overview'">
              <DirectionOverview
                ref="overviewRef"
                :logList="logList"
                :directionList="directionList"
              />
            </div>

            <!-- 图表分析 -->
            <div v-show="activeTab === 'charts'">
              <DirectionCharts
                ref="chartsRef"
                :logList="logList"
                :directionList="directionList"
              />
            </div>

            <!-- 方向对比 -->
            <div v-show="activeTab === 'comparison'">
              <DirectionComparison
                ref="comparisonRef"
                :logList="logList"
                :directionList="directionList"
              />
            </div>

            <!-- 数据明细 -->
            <div v-show="activeTab === 'detail'">
              <DirectionDetail
                :logList="logList"
                :total="total"
                :queryParams="queryParams"
                :loading="loading"
                :directionList="directionList"
                @pagination="getList"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="DirectionAnalysis">
import { ref, onMounted, nextTick } from "vue";
import { listLog } from "@/api/analyzemanagement/log";
import { listDirection } from "@/api/directionmanagement/direction";
import DirectionOverview from "./components/DirectionOverview.vue";
import DirectionComparison from "./components/DirectionComparison.vue";
import DirectionDetail from "./components/DirectionDetail.vue";
import DirectionCharts from "./components/DirectionCharts.vue";

// 数据相关
const logList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dateRange = ref([]);
const directionList = ref([]); // 方向列表

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  direction: null,
  logType: null,
});

// 日志类型映射
const logTypeMap = {
  0: "课程学习",
  1: "学习时长",
  2: "竞赛情况",
  3: "项目实践",
  4: "科创贡献",
};

// 当前激活的标签页
const activeTab = ref("overview");

// 组件引用
const overviewRef = ref(null);
const comparisonRef = ref(null);
const trendRef = ref(null);
const chartsRef = ref(null);

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab;
  nextTick(() => {
    // 切换标签页时调整图表大小
    if (tab === "overview" && overviewRef.value) {
      overviewRef.value.resizeChart();
    } else if (tab === "charts" && chartsRef.value) {
      chartsRef.value.resizeChart();
    } else if (tab === "comparison" && comparisonRef.value) {
      comparisonRef.value.resizeChart();
    } else if (tab === "trend" && trendRef.value) {
      trendRef.value.resizeChart();
    }
  });
};

/** 查询方向列表 */
const getDirectionList = () => {
  listDirection({}).then((response) => {
    directionList.value = response.rows || [];
  });
};

/** 查询日志列表 */
const getList = () => {
  loading.value = true;
  const params = { ...queryParams.value };
  if (dateRange.value && dateRange.value.length === 2) {
    params.beginTime = dateRange.value[0];
    params.endTime = dateRange.value[1];
  }
  listLog(params).then((response) => {
    logList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  dateRange.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    direction: null,
    logType: null,
  };
  handleQuery();
};

// 初始化
onMounted(() => {
  getDirectionList();
  getList();
});
</script>

<style scoped>
.filter-form {
  margin-bottom: 20px;
}

.analysis-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analysis-tabs {
  display: flex;
  gap: 10px;
}

.analysis-content {
  min-height: 500px;
}
</style>
